 <!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="BI system demo">
    <meta name="author" content="Louis">

    <script src="http://172.16.8.86/static_files/jquery-3.3.1.min.js"></script>
    <!-- Echart -->
    <script type="text/javascript" src="http://img.foshanplus.com/js/common.js" charset="utf-8"></script>
    <script type="text/javascript" src="http://172.16.8.86/static_files/echarts.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="http://img.foshanplus.com/js/china.js" charset="utf-8"></script>


    <title>测试</title>
    <style type="text/css">
        body,
        html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }

        #allmap {
            width: 100%;
            height: 100%;
        }

        p {
            margin-left: 5px;
            font-size: 14px;
        }
    </style>
</head>

<!-- <body style="background: #333"> -->

<body>
    <div id="allmap"></div>
</body>

<script type="text/javascript">
var myChart = echarts.init(document.getElementById("allmap"))
var getDataURL  = "/news/"+{{page}}+"/"

function cityPoints(citys, size, color, res){
    for (var i = 0; i < citys.length; i++) {
                res.push({
                    name: citys[i],
                    value: geoCoordMap[citys[i]],
                    "symbolSize": size,
                    "itemStyle": {
                        "normal": {
                            "color": color
                        }
                    }
                })
            }
    return res
}

$.ajax({
    url: getDataURL,
    useDefaultXhrHeader: false, //important, otherwise its not working
    type: "GET",
    dataType: 'text',
    success: function(response, opts) {
        res = JSON.parse(response)
        gd_citys = res.city_list
        gd_center_citys = res.center_citys
        gd_movelines = res.series[2]
        console.log(res.china_data)
        res = res.china_data
        geodata = convertGeoData(res.citys)
        geodata1 = convertGeoData(res.center_citys)


        var allData = {
            "citys":[],
            "moveline":convertDataLine(res.moveline)
        }

        allData.citys = cityPoints(res.center_citys, 6, "#58B3CC", allData.citys)
        allData.citys = cityPoints(gd_center_citys, 6, "#58B3CC", allData.citys)
        allData.citys = cityPoints(res.citys, 3, "#F58158", allData.citys)
        allData.citys = cityPoints(gd_citys, 3, "#F58158", allData.citys)

        gd_lines = convertDataLine(gd_movelines)

        for (var i = 0; i < gd_lines.length; i++) {
            allData.moveline.push(gd_lines[i])
        }

        console.log(allData)
           option = {
                backgroundColor: '#404a59',
                title: {
                    text: '全国传播路径',
                    left: 'center',
                    textStyle: {
                        color: '#fff'
                    }
                },

                geo: {
                    map: 'china',
                    label: {
                        emphasis: {
                            show: false
                        }
                    },
                    roam: true,
                    itemStyle: {
                        normal: {
                            areaColor: '#323c48',
                            borderColor: '#404a59'
                        },
                        emphasis: {
                            areaColor: '#2a333d'
                        }
                    }
                },
                series: [{
                    name: '地点',
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    zlevel: 2,
                    rippleEffect: {
                        brushType: 'stroke'
                    },
                    label: {
                        emphasis: {
                            show: true,
                            position: 'right',
                            formatter: '{b}'
                        }
                    },
                    symbolSize: 4,
                    showEffectOn: 'render',
                    itemStyle: {
                        normal: {
                            color: '#46bee9'
                        }
                    },
                    data: allData.citys
                }, {
                    name: '线路',
                    type: 'lines',
                    coordinateSystem: 'geo',
                    zlevel: 2,
                    large: true,
                    effect: {
                        show: true,
                        constantSpeed: 30,
                        symbol: 'pin',
                        symbolSize: 3,
                        trailLength: 0,
                    },
                    lineStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#58B3CC'
                            }, {
                                offset: 1,
                                color: '#F58158'
                            }], false),
                            width: 3,
                            opacity: 0.2,
                            curveness: 0.1
                        }
                    },
                    data: allData.moveline
                }]
            }
            myChart.setOption(option)
        },

    failure: function(response, opts) {alert("failure")}
});

</script>